<template>
    <div class="wrapper">
        <minbar :isPadding="true">
            <div slot="middle" class="x-suosou" @click="openSearch">
                <text class="x-sousuo-icon iconfont">&#xe677;</text>
                <text class="x-sousuo-text">搜索商品</text>
            </div>
        </minbar>
        <div class="x-content" :style="{height:getPageHeight()}">
            <!-- 左边的分类 -->
            <div class="x-left">
                <scroller show-scrollbar="flase">
                    <x-lefttab :tabTitles="tabTitles" @itemClick="itemClick"></x-lefttab>
                </scroller>
            </div>
            <!-- 右边的详细 -->
            <div class="x-right">
                <scroller show-scrollbar="flase">
                    <!-- 新品推荐 -->
                    <!-- <div class="x-convert">
                        <div class="x-convert-title">
                            <text class="x-convert-text">新品推荐</text>
                        </div>
                    </div>
                    <div class="x-convert-content">
                        <div class="x-convert-div" 
                            v-for="(v,index) in tuijianData"
                            :key="index"
                            @click="openPage">
                            <image class="x-image" :src="v.img"></image>
                            <text class="x-image-text">{{v.title}}</text>
                        </div>
                    </div> -->
                    <!-- <div class="x-border"></div> -->
                    <!-- 热门分类 -->
                    <div class="x-convert">
                        <div class="x-convert-title">
                            <text class="x-convert-text">{{fltitle}}</text>
                        </div>
                    </div>
                    <div class="x-convert-content">
                        <div class="x-convert-div padding-bottom15" 
                            v-for="(v,index) in flData"
                            :key="index"
                            @click="openPage(v.id)">
                            <image class="x-image" :src="v.thumb"></image>
                            <text class="x-image-text">{{v.name}}</text>
                        </div>
                    </div>
                </scroller>
            </div>
        </div>
    </div>   
</template>

<script>
import asCore from "../../common/js/core";
const navigator = weex.requireModule('navigator');
export default {
    components:{
        "minbar" : require("../../common/component/minbar.vue"),
        "x-lefttab" : require("../../common/component/lefttab.vue")
    }, 
    data () {
        return {
            fltitle:"热门分类",
            tabTitles:[],
            tuijianData:[],
            flData:[
                
            ],
        }
    },
    created() {
        this.getCategoryData();
    },
    methods:{
       /**获取分类 */
       getCategoryData(callback){
          asCore.post("/goods/category/list",{},(data,msg,flag)=>{
            if(flag==true){
                //asCore.alert(JSON.stringify(data));
                // var array = [{
                //     id:"rm",
                //     name:"热门分类"
                // }];
                //array.push(...data);
                this.tabTitles = data;
                this.itemClick(data[0]['id'],data[0]['name']);
            }
            callback && callback();
          });
       },
       /**点击分类 */
       itemClick(id,name,index){
           this.fltitle = name;
           asCore.post("/goods/category/list",{parent_id:id},(data,msg,flag)=>{
                if(flag==true){
                    this.flData = data;
                }
          });
       },
       getPageHeight () {
            const { env } = weex.config;
            return env.deviceHeight / env.deviceWidth * 750 - 130;
       },
       openPage(rowid){
           //asCore.alert(JSON.stringify(data));
           navigator.pushParam(
                asCore.localpath + 'tailor/app/shopinfo/shopsearch.js',{
                    categoryid: rowid 
                }
            );
           //navigator.push(asCore.localpath + 'tailor/app/shopinfo/shopinfo.js');
       },
       /**打开搜索界面 */
       openSearch(){
          navigator.push(asCore.localpath + 'tailor/app/shopinfo/shopsearch.js');
       }
    }
}
</script>
<style scoped>
.wrapper{
   
}
.iconfont{
    font-family: iconfont;
}
.padding-bottom15 {
    padding-bottom: 12px;
}
.x-content {
    position: relative;
    height: 1120px;
}
.x-left {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 180px;
    background-color: #dedfe1;
}
.x-left-scroller {
    
}
.x-right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 180;
    background-color: #fff;
}
.x-convert {
    padding-left: 20px;
    padding-right: 20px;
}
.x-convert-title {
    height: 80px;
    justify-content: center;
}
.x-convert-text {
    color:#1f1e23;
    font-size:30px;
}
.x-convert-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left:11px;
    padding-right: 10px;
    padding-bottom: 10px;
}
.x-convert-div {
    flex-direction: column;
    margin:11px;
    margin-top:0px;
}
.x-image {
    height: 160px;
    width:160px;
}
.x-image-text {
    width: 160px;
    text-align: center;
    font-size:22px;
    color: #1d1c21;
    padding-top:10px;
    lines:1;
    text-overflow: ellipsis;
}
.x-border {
    height: 20px;
    background-color: #dedfe1;
}
.x-suosou {
    background-color: #fff;
    height: 60px;
    width: 400px;
    border-radius: 50px;
    margin-top:10px;
    flex-direction: row;
    align-items: center;
    padding-left: 25px;
}
.x-sousuo-icon {
    color: #654d21;
    font-size:35px;
    top:3px;
    margin-right: 10px;
}
.x-sousuo-text {
    color: #654d21;
    font-size:28px;
    flex: 1;
    text-align: center;
    padding-right: 40px;
}
</style>